//rce
//  import React, { Component } from 'react'

// export class list extends Component {
//   render() {
//     return (
//       <div>list</div>
//     )
//   }
// }
//rfc
// export default list

 import React from 'react'
  import Mock from "mockjs"
  var arr=["html","css","js"]
 let data= Mock.mock({
   "list|5":[{
     "name":"@cname",
     img:"@image(100x100,@color)",
     id:"@id",
     "child":[{
       "id":"@id",
       img:"@image(100x100,@color)",
       text:"@ctitle(50,100)"
     }]
   }]
 })
 export default function list() {
  return (
    <div>{
      arr.map((item,index)=>{
        return <li key={index}>{item}</li>
      })
      }
      <ul>
        {
        data.list.map((item)=>{
          return <li key={item.id}>
            <h2> {item.name} </h2>
             {
               item.child.map((i)=>{
                 return <div key={i.id}>
                   <img src={i.img} alt="" />
                   <p>{i.text}</p>
                 </div>
               })
             }
           </li>

        })}
      </ul>
      
      
      </div>
  )
}
//rfce
// import React from 'react'

// function list() {
//   return (
//     <div>list</div>
//   )
// }
// //rcc
// export default list

// import React, { Component } from 'react'

// export default class list extends Component {
//   render() {
//     return (
//       <div>list</div>
//     )
//   }
// }
